<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            cursor: none;
        }

        body {
            background-color: #1d1515;
            width: 100%;
            height: 100%;
            min-width: 1025px;
            cursor: none;
        }

        .time {
            display: flex;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: fit-content;
            transform: translate(-50%, -50%);
            min-width: 200px;
            font-size: 28vw;
            font-weight: bold;
            color: #eee;
        }

        #hour {
            width: 40%;
            height: 100%;
            text-align: right;
        }

        #dots {
            width: 20%;
            height: 100%;
            text-align: center;
            line-height: 110%;
        }

        #min {
            width: 40%;
            height: 100%;
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="time" style="align-items: center;">
        <div id="hour"></div>
        <div id="dots">:</div>
        <div id="min"></div>
    </div>

</body>
<script>
    let h = document.getElementById('hour'),
        m = document.getElementById('min'),
        dots = document.getElementById('dots');
    //每秒获取一次时间
    setInterval(() => {
        getCurrentTime();
    }, 1000);

    function getCurrentTime() {
        let date = new Date();
        let month = date.getMonth() + 1,
            day = date.getDay(),
            hour = date.getHours(),
            min = date.getMinutes();
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hour = hour < 10 ? '0' + hour : hour;
        min = min < 10 ? '0' + min : min;
        h.innerHTML = hour;
        m.innerHTML = min;
    }

    //实现中间的:闪烁效果
    let visible = true;
    setInterval(() => {
        dots.style.visibility = visible ? 'visible' : 'hidden';
        visible = !visible;
    }, 1000);
</script>

</html>